<!-- eslint-disable vue/html-self-closing -->
<template>
  <!--
  action:用来指定图片存储的地址
  show-file-list:是否显示文件上传的文件列表
  on-succsee : 本地文件上传成功之前的回调,需要配合action一起使用
  before-upload : 上传图片的回调函数,通常用来限制图片的大小和格式
  :http-request : 覆盖默认的上传方式,可以实现自定义文件上传
  注意:一旦使用了自定义上传action就不需要指定地址,直接写#
  使用了自定义上传就不需要on-success了
-->
  <el-upload
    class="avatar-uploader"
    action="#"
    :show-file-list="false"
    :before-upload="beforeAvatarUpload"
    :http-request="upload"
  >
    <img v-if="value" :src="value" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon" />
    <!-- 进度条 -->
    <el-progress v-if="showprogress" :percentage="percent"></el-progress>
  </el-upload>
</template>

<script>
// 下面的代码是固定写法
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({
  SecretId: 'AKIDITVM1Ys0zqY8Zqtl9LMFyWt663JNCpKh', // 身份识别ID
  SecretKey: 'FIEyb9a0JODqGZH0lR4e6YqxufCYieNy' // 身份秘钥
})
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      imageUrl: '',
      percent: 0, // 上传进度条
      showprogress: false // 切换进度条的显示和隐藏
    }
  },
  methods: {
    // 本地文件上传成功之后的回调函数  通过res.file获取上传的文件对象
    upload(res) {
      console.log(res)
      if (res.file) {
        // 进度条显示
        this.showprogress = true
        cos.putObject(
          {
            Bucket: 'hr88-1316924442' /* 填入您自己的存储桶，必须字段 */,
            Region: 'ap-nanjing' /* 存储桶所在地域，例如ap-beijing，必须字段 */,
            Key: res.file
              .name /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */,
            Body: res.file /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */,
            onProgress: (progressData) => {
              console.log(JSON.stringify(progressData))
              this.percent = progressData.percent * 100
            }
          },
          // function (err, data)   此时this指向undefined
          // 箭头函数修改this指向   this指向vue
          (err, data) => {
            // 响应成功或失败都会打印   成功打印data  失败打印err
            console.log(err || data)
            if (data.statusCode === 200) {
              // 给路径添加协议
              // this.imageUrl = `http://${data.Location}`
              // 进度条隐藏
              this.showprogress = false
              this.$emit('input', `http://${data.Location}`)
            }
          }
        )
      }
    },
    // 上传图片的回调函数,通常用来限制图片的大小和格式
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
